<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div class="nav base-flex">
					<div class="nav-li">
						<span>券金额大于</span>
						<el-input-number
							v-model="filterSelectVal.amount"
							controls-position="right"
							@change="
								val =>
									refresh({
										startCouponMoney: val
									})
							"
							:min="0"
							size="mini"
						></el-input-number>
					</div>
					<div class="nav-li">
						<span>月销量大于</span>
						<el-input-number
							v-model="filterSelectVal.monthSales"
							controls-position="right"
							@change="
								val =>
									refresh({
										startSale: val
									})
							"
							:min="0"
							size="mini"
						></el-input-number>
					</div>
					<div class="nav-li">
						<span>是否9.9包邮</span>
						<el-select
							class="el-select"
							placeholder="请选择"
							size="mini"
							v-model="filterSelectVal.isNine"
							@change="
								val =>
									refresh({
										isNine: val
									})
							"
						>
							<el-option label="全部" value></el-option>
							<el-option label="是" :value="1"></el-option>
							<el-option label="否" :value="0"></el-option>
						</el-select>
					</div>
					<div class="nav-li">
						<span>是否抖好货</span>
						<el-select
							class="el-select"
							placeholder="请选择"
							size="mini"
							v-model="filterSelectVal.isDouGoods"
							@change="
								val =>
									refresh({
										isDhh: val
									})
							"
						>
							<el-option label="全部" value></el-option>
							<el-option label="是" :value="1"></el-option>
							<el-option label="否" :value="0"></el-option>
						</el-select>
					</div>
					<div class="nav-li">
						<filterClass
							@change="
								val =>
									refresh({
										cid: val
									})
							"
						></filterClass>
					</div>
					<div class="nav-li">
						<filterGstatus
							@change="
								val =>
									refresh({
										gStatus: val
									})
							"
						></filterGstatus>
					</div>
					<div class="nav-li">
						<span>是否置顶</span>
						<el-select
							class="el-select"
							placeholder="请选择"
							size="mini"
							v-model="filterSelectVal.isRecommended"
							@change="
								val =>
									refresh({
										isRecommended: val
									})
							"
						>
							<el-option label="全部" value></el-option>
							<el-option label="是" :value="1"></el-option>
							<el-option label="否" :value="0"></el-option>
						</el-select>
					</div>
				</div>
			</template>
			<template #slot-add>
				<el-button type="danger" size="mini" @click="addGoods()">录入商品</el-button>
			</template>
			<template #slot-setSort="{scope}">
				<p class="setsort" @click="setGoodsort(scope.row)">修改</p>
			</template>
			<template #slot-setBillion="{scope}">
				<p class="setsort" @click="setGoodInfo(scope.row)">设置百亿补贴</p>
			</template>
			<template #slot-setTime="{scope}">
				<p class="setsort" @click="setRushInfo(scope.row)">设置限时抢购</p>
			</template>
			<template #slot-zero="{scope}">
				<p class="setsort" @click="setZero(scope.row)">
					{{ appName == 'tjt' ? '设置新人福利' : '设置0元购' }}
				</p>
			</template>
			<template #slot-step="{scope}">
				<p class="setsort" @click="setStep(scope.row)">设置互动营销</p>
			</template>
			<template #slot-delete="{scope}">
				<delBtn @del="crud.delete(scope.row)"></delBtn>
			</template>

			<template #table-column-goodInfo="{scope}">
				<good-info :item="scope.row"></good-info>
			</template>
			<template #table-column-isRecommended="{scope}">
				<div>
					<el-tag v-if="scope.row.isRecommended == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-couponInfo="{scope}">
				<coupon-info :item="scope.row"></coupon-info>
			</template>
			<template #table-column-isDHh="{scope}">
				<div>
					<el-tag v-if="scope.row.isDhh == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-gStatus="{scope}">
				<div>
					<el-tag v-if="scope.row.gStatus == 1" type="success">正常</el-tag>
					<el-tag type="info" v-if="scope.row.gStatus == 2">已下架</el-tag>
				</div>
			</template>
			<template #table-column-isNine="{scope}">
				<div>
					<el-tag v-if="scope.row.isNine == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-platform="{scope}">{{
				scope.row.source | dict_platform
			}}</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
		<cl-form ref="cl-form2"></cl-form>
	</div>
</template>

<script>
import goodInfo from './components/list/good-info';
import couponInfo from './components/list/coupon-info';
import searchCounpon from './components/list/searchCoupon';
import filterClass from './components/filterClass';
import filterGstatus from './components/filterGstatus';
import { platform } from '@/dict/index';
import { Type_TLJ } from '@/dict/index';
import moment from 'moment';
import store from 'store';
import _ from 'lodash';

export default {
	data() {
		return {
			crud: null,
			platform: platform,
			platformIndex: '',
			mail: '',
			dou: '',
			filterSelectVal: {
				amount: 0, //劵金额
				monthSales: 0, //月销量
				isNine: '',
				isDouGoods: '',
				isRecommended: 0
			},
			enterGoodsInfo: {},
			accountList: [], // 淘宝联盟列表
			fromList: [], // 平台列表
			typeOptions: [],
			perfaceValue_GoodInfo: 0,
			perfaceValue_Rush: 0,
			perfaceValue_Zero: 0,
			goodsTitle: '正在获取中',
			actime: [],
			goodsTypeMemory: '',
			appName: '' //平台名称
		};
	},
	components: {
		goodInfo,
		couponInfo,
		// eslint-disable-next-line
		searchCounpon,
		filterClass,
		filterGstatus
	},
	created() {
		this.actime = [
			moment(new Date().getTime() + 86400000).format('YYYY-MM-DD 00:00:00'),
			moment(new Date().getTime() + 172800000).format('YYYY-MM-DD 00:00:00')
		];
		this.taobaoAccountTlj();
		this.getType();
		this.platForm();
	},
	methods: {
		// 获取百亿补贴类型
		getType() {
			// 获取百万补贴商品分类
			this.$service.goodsMenagement.specialClassify
				.page({
					page: 1,
					size: 60,
					sort: 'asc',
					order: 'level',
					specialType: 100
				})
				.then(res => {
					var temp = res.list;
					var target = [];
					for (var i = 0; i < temp.length; i++) {
						target[i] = { label: temp[i].mainName, value: temp[i].floorId };
					}
					this.typeOptions = target;
				});
		},
		// 获取联盟账号
		async taobaoAccountTlj() {
			let list = await this.$service.goodsMenagement.taobaoAccountTlj.userAccountList({
				isBwbt: 1
			});
			list = list.map(item => {
				return {
					label: item.accountName,
					value: item.accountId
				};
			});

			this.accountList = list;
		},
		// 获取平台账号
		platForm() {
			this.$service.common.userAppList().then(res => {
				let list = res.map(el => {
					return {
						label: el.name,
						value: el.key
					};
				});
				this.fromList = list;
			});
		},
		submitForm(formData) {
			this.crud.setForm('data', formData);
			this.crud.submit();
		},
		setGoodsort(item) {
			const self = this;
			let app = this.$refs['cl-form'].open({
				props: {
					'label-width': '120px',
					width: '570px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'pic',
						label: '商品主图：',
						span: 24,
						value: item.pic,
						component: {
							name: 'cl-upload'
						}
					},
					{
						prop: 'title',
						label: '商品标题',
						span: 24,
						value: item.title,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						}
					},
					{
						prop: 'ysqLevel',
						label: '商品排序',
						span: 24,
						value: item.ysqLevel ? item.ysqLevel : 100,
						component: {
							name: 'ysqlevel-input',
							data() {
								return {
									value2: 0
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div style="display:flex">
										<el-input-number
											controls-position="right"
											min={1}
											max={100000}
											onInput={this.input}
											v-model={this.value2}></el-input-number>
										<span style="color:red;margin-left:10px">
											* 序号越大，排序越靠前
										</span>
									</div>
								);
							}
						},
						rules: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
					},
					{
						prop: 'gStatus',
						label: '是否上架',
						span: 12,
						value: item.gStatus,
						component: {
							name: 'el-input-number1',
							attrs: {
								'controls-position': 'right',
								min: 1,
								max: 10000
							},
							data() {
								return {
									value2: 1
								};
							},
							props: {
								value: [String, Number]
							},
							methods: {
								change(e) {
									this.$emit('input', e);
								}
							},
							mounted() {
								this.value2 = this.value;
							},
							render() {
								return (
									<el-radio-group onChange={this.change} v-model={this.value2}>
										<el-radio label={1}>上架</el-radio>
										<el-radio label={0}>下架</el-radio>
									</el-radio-group>
								);
							}
						},
						rules: [{ required: true, message: '免单总数不能为空', trigger: 'blur' }]
					},
					{
						prop: 'isRecommended',
						props: {
							'label-width': '120px'
						},
						label: '是否开启首页置顶',
						span: 13,
						value: item.isRecommended == 1 ? true : false,
						component: {
							name: 'el-switch',
							on: {
								change(val) {
									if (val) {
										app.setData('items[prop:recommendSort].hidden', false);
									} else {
										app.setData('items[prop:recommendSort].hidden', true);
									}
								}
							}
						}
					},
					{
						prop: 'recommendSort',
						label: '商品置顶排序',
						span: 24,
						hidden: item.isRecommended == 1 ? false : true,
						value: item.recommendSort || 1,
						component: {
							name: 'recommendSort-input',
							data() {
								return {
									value2: 0
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div style="display:flex">
										<el-input-number
											controls-position="right"
											min={1}
											max={5}
											onInput={this.input}
											v-model={this.value2}></el-input-number>
										<span style="color:red;margin-left:10px">
											* 首页置顶(序号越小，排序越靠前)
										</span>
									</div>
								);
							}
						},
						rules: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
					}
				],
				on: {
					submit({ data, close }) {
						self.$service.goodsMenagement.goods
							.updateGoods({
								...data,
								isRecommended: data.isRecommended ? 1 : 0,
								id: item.gid
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
		},
		// 设置百亿补贴
		setGoodInfo(item) {
			const self = this;
			const subsidyData = store.get('set-subsidy') || {};

			const app = this.$refs['cl-form2'].open({
				props: {
					labelWidth: '120px',
					center: true,
					'custom-class': 'custom-class-dialog',
					width: '750px'
				},
				items: [
					{
						prop: 'title',
						label: '商品标题',
						span: 24,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						}
					},
					{
						prop: 'accountIds',
						label: '账号',
						span: 13,
						value: subsidyData.accountIds || [self.accountList[0].value],
						component: {
							name: 'el-select',
							options: self.accountList,
							attrs: {
								placeholder: '请选择账号'
							},
							props: {
								multiple: true
							}
						},
						rules: {
							required: true,
							message: '账号不能为空'
						}
					},
					{
						prop: 'campaignType',
						label: '创建类型',
						span: 10,
						value: 2,
						component: {
							name: 'el-select',
							attrs: {
								placeholder: '请选择'
							},
							props: {
								clearable: true
							},
							options: Type_TLJ
						},
						rules: {
							required: true,
							message: '创建类型不能为空'
						}
					},
					{
						prop: 'gid',
						label: '商品ID',
						span: 10,
						value: item.gid,
						component: {
							name: 'el-input',
							attrs: {
								placeholder: '请选择'
							},
							props: {}
						}
					},
					{
						prop: 'url',
						props: {
							labelWidth: '0px'
						},
						component: {
							name: 'search-counpon',
							props: {
								item: Object
							},
							attrs: {
								item
							},
							mounted() {
								this.$refs['real'].ruleForm.url = this.item.link;
								this.$refs['real'].ruleForm.couponUrl = this.item.couponUrl;
								this.$refs['real'].ruleForm.gid = this.item.gid;
								this.$refs['real'].submitForm('form');
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								},
								Goodsinfo(e) {
									self.enterGoodsInfo = e;
									self.goodsTitle = e.title.substring(0, 10);
									app.setForm('defNum', e.sale);
								},
								perface(e) {
									self.perfaceValue_GoodInfo = e;
								},
								onSelectPic(url) {
									app.setForm('pic', url);
								}
							},
							render() {
								return (
									<searchCounpon
										ref="real"
										onInput={this.input}
										onGoodsInfo={this.Goodsinfo}
										onperface={this.perface}
										on-select-pic={this.onSelectPic}
										item={self.enterGoodsInfo}
										type={3}></searchCounpon>
								);
							}
						},
						rules: [{ required: true, message: '请先检索商品', trigger: 'blur' }]
					},
					{
						prop: 'floorId',
						label: '商品分类',
						span: 12,
						value: subsidyData.floorId || self.goodsTypeMemory,
						component: {
							name: 'el-select',
							attrs: {
								placeholder: '请选择'
							},
							props: {
								clearable: true
							},
							options: self.typeOptions,
							on: {
								change: id => {
									self.goodsTypeMemory = id;
								}
							}
						},
						rules: {
							required: true,
							message: '商品分类不能为空'
						}
					},
					{
						prop: 'tljMoney',
						label: '淘礼金金额：',
						component: {
							name: 'mdMoney_c',
							data() {
								return {
									value2: 0
								};
							},
							methods: {
								Change() {
									this.$emit('input', self.perfaceValue_GoodInfo);
									if (
										this.value2 >=
										(self.enterGoodsInfo.endPrice -
											self.enterGoodsInfo.hzQuanOver) *
											1
									) {
										self.$message.error('淘礼金金额不能大于商品券后价的100%');
									}
								}
							},

							render() {
								return (
									<div style="display:flex">
										<el-input-number
											max={
												Number(
													self.enterGoodsInfo.endPrice -
														self.enterGoodsInfo.hzQuanOver
												) * 1 || 0
											}
											step={0.01}
											min={1}
											v-model={self.perfaceValue_GoodInfo}
											onfocus={this.Change}
											onChange={this.Change}></el-input-number>
										<div style="margin-left:10px">
											到手价格￥
											<span style="color:red">
												{(
													parseFloat(self.enterGoodsInfo.endPrice || 0) -
													(self.perfaceValue_GoodInfo
														? self.perfaceValue_GoodInfo
														: 0) -
													(self.enterGoodsInfo.hzQuanOver || 0)
												).toFixed(2)}
											</span>
											元
										</div>
									</div>
								);
							}
						}
					},
					{
						prop: 'tljName',
						label: '淘礼金名称',
						value: self.goodsTitle,
						component: {
							name: 'tljName-input',
							attrs: {
								placeholder: '请输入名称',
								clearable: true,
								maxlength: 10
							},
							methods: {
								Change() {
									this.$emit('input', self.goodsTitle);
								}
							},
							render() {
								return (
									<el-input
										v-model={self.goodsTitle}
										onChange={this.Change}
										onfocus={this.Change}></el-input>
								);
							}
						},
						rules: [
							{
								required: true,
								message: '淘礼金名字不能为空'
							},
							{
								min: 5,
								max: 10,
								message: '淘礼金名字在5 ~ 10个字符之间'
							}
						]
					},
					{
						prop: 'total',
						label: '活动商品个数：',
						span: 8,
						value: parseInt(Math.random() * (10000 - 5000 + 1) + 5000, 10),
						component: {
							name: 'el-input-number',
							attrs: {
								'controls-position': 'right',
								min: 1,
								max: 10000
							}
						},
						rules: [
							{
								required: true,
								message: '请输入活动商品数量',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'time',
						label: '活动时间：',
						value: subsidyData.time || self.actime,
						span: 16,
						component: {
							name: 'el-date-picker',
							attrs: {
								type: 'datetimerange',
								'value-format': 'yyyy-MM-dd HH:mm:ss'
							}
						},
						rules: [
							{
								required: true,
								message: '请选择活动时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'ysqLevel',
						label: '商品排序：',
						value: 100,
						component: {
							name: 'ysqlevels',
							data() {
								return {
									ysqLevel: 100
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.ysqLevel = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.ysqLevel}
											controls-position="right"
											onInput={this.input}
											min={1}
											max={10000}></el-input-number>
										<span style="color:#999999;margin-left:10px">
											序号越大，排序越靠前
										</span>
									</div>
								);
							}
						}
					},
					{
						prop: 'defNum',
						label: '初始领取数量：',
						value: parseInt(Math.random() * 2000) + 4000,
						span: 13,
						component: {
							name: 'el-input-number'
						}
					},
					{
						prop: 'status',
						label: '商品状态：',
						value: 1,
						component: {
							name: 'g_radio',
							data() {
								return {
									value2: 1
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = Number(this.value || 1);
							},
							methods: {
								change(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<el-radio-group onChange={this.change} v-model={this.value2}>
										<el-radio label={1}>上架</el-radio>
										<el-radio label={0}>下架</el-radio>
									</el-radio-group>
								);
							}
						}
					}
				],
				op: {
					visible: true,
					layout: ['confirm']
				},
				on: {
					load() {},
					submit({ data, close, done }) {
						store.set('set-subsidy', {
							floorId: data.floorId,
							accountIds: data.accountIds,
							time: data.time
						});

						data.quanMLink = self.enterGoodsInfo.quanMLink;
						data.hzQuanOver = self.enterGoodsInfo.hzQuanOver;

						self.$service.goodsMenagement.mdGoods
							.add({
								...data,
								...data.url,
								type: 3,
								gid: item.gid,
								startTime: data.time[0],
								endTime: data.time[1],
								tljType: 1,
								accountIds: data.accountIds.join(',') // 改来改去
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
								done();
							});
					}
				}
			});
		},
		// 设置限时抢购
		async setRushInfo(item) {
			let self = this;
			let timeList = await this.$service.goodsMenagement.goods.flashTime();
			let timeList2 = timeList.map(i => {
				return {
					value: i.time,
					label: i.time
				};
			});
			let independentSort = await this.$service.goodsMenagement.mdGoods.independentSort({
				id: item.id
			});
			let appArr = [];
			independentSort.map(i => {
				appArr.push(i.app);
			});
			const app = this.$refs['cl-form'].open({
				props: {
					labelWidth: '120px',
					center: true,
					'custom-class': 'custom-class-dialog'
				},
				items: [
					{
						prop: 'pic',
						label: '商品主图：',
						span: 24,
						component: {
							name: 'cl-upload'
						}
					},
					{
						prop: 'accountIds',
						label: '账号',
						value: [],
						component: {
							name: 'el-select',
							props: {
								placeholder: '请选择账号',
								multiple: true
							},
							options: self.accountList
						},
						rules: {
							required: true,
							message: '账号不能为空'
						}
					},
					{
						prop: 'title',
						label: '商品标题',
						span: 24,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						}
					},
					{
						prop: 'gid',
						label: '商品ID',
						span: 10,
						value: item.gid,
						component: {
							name: 'el-input',
							attrs: {
								placeholder: '请选择'
							},
							props: {}
						}
					},
					{
						prop: 'url',
						props: {
							labelWidth: '0px'
						},
						component: {
							name: 'search-goods',
							props: {
								item: Object
							},
							attrs: {
								item
							},
							mounted() {
								this.$refs['real'].ruleForm.url = this.item.link;
								this.$refs['real'].ruleForm.couponUrl = this.item.couponUrl;
								this.$refs['real'].ruleForm.gid = this.item.gid;
								this.$refs['real'].submitForm('form');
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								},
								Goodsinfo(e) {
									self.enterGoodsInfo = e;
									if (e.preCommssion) {
										app.setForm('mdMoney', e.preCommssion);
									}
								},
								perface(e) {
									self.perfaceValue_Rush = e;
								},
								onSelectPic(url) {
									app.setForm('pic', url);
								}
							},
							render() {
								return (
									<searchCounpon
										ref="real"
										onInput={this.input}
										onGoodsInfo={this.Goodsinfo}
										onperface={this.perface}
										on-select-pic={this.onSelectPic}
										item={self.enterGoodsInfo}></searchCounpon>
								);
							}
						},
						rules: [{ required: true, message: '请先检索商品', trigger: 'blur' }]
					},
					{
						prop: 'mdMoney',
						label: '淘礼金金额：',
						component: {
							name: 'mdMoney_c',
							data() {
								return {
									value2: 0
								};
							},
							props: {
								value: null
							},
							watch: {
								value: {
									immediate: true,
									handler(val) {
										if (val) {
											this.value2 = val;
										}
									}
								}
							},
							methods: {
								Change(e) {
									this.$emit('input', e);
									if (self.appName != 'tjt') {
										if (
											e >=
											(self.enterGoodsInfo.endPrice -
												self.enterGoodsInfo.hzQuanOver) *
												0.8
										) {
											self.$message.error(
												'淘礼金金额不能大于商品券后价的80%'
											);
										}
									}
								}
							},
							render() {
								return (
									<div style="display:flex">
										<el-input-number
											max={
												Number(
													self.enterGoodsInfo.endPrice -
														self.enterGoodsInfo.hzQuanOver
												) || 0
											}
											step={0.01}
											min={0}
											v-model={this.value2}
											onChange={this.Change}></el-input-number>
										<div style="margin-left:10px">
											到手价格￥
											<span style="color:red">
												{(
													parseFloat(self.enterGoodsInfo.endPrice || 0) -
													(this.value2 || 0) -
													(self.enterGoodsInfo.hzQuanOver || 0)
												).toFixed(2)}
											</span>
											元
										</div>
										<div style="margin-left:10px">
											佣金￥
											<span style="color:red">
												{self.enterGoodsInfo.preCommssion || 0}
											</span>
											元
										</div>
									</div>
								);
							}
						},
						rules: {
							required: true,
							trigger: ['blur', 'change'],
							validator: (rule, value, callback) => {
								if (value >= 1) {
									callback();
								} else {
									callback(new Error('补贴金额必须大于1'));
								}
							}
						}
					},
					{
						prop: 'total',
						label: '活动商品个数：',
						value: parseInt(Math.random() * (10000 - 5000 + 1) + 5000, 10),
						component: {
							name: 'el-input-number',
							attrs: {
								'controls-position': 'right',
								min: 1,
								max: 10000
							},
							on: {
								change(val) {
									self.defNumMax = val;
								}
							}
						},
						rules: [
							{
								required: true,
								message: '请输入活动商品数量',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'time',
						label: '活动开始时间：',
						span: 12,
						value: moment().format('YYYY-MM-DD'),
						component: {
							name: 'el-date-picker',
							attrs: {
								type: 'date',
								'value-format': 'yyyy-MM-dd'
							}
						},
						rules: [
							{
								required: true,
								message: '请选择活动时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'startTime',
						props: {
							'label-width': '0px'
						},
						span: 12,
						component: {
							name: 'el-select',
							props: {
								placeholder: '请选择开始时间'
							},
							options: timeList2
						},
						rules: [
							{
								required: true,
								message: '请选择开始时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'time2',
						label: '活动结束时间：',
						span: 12,
						value: moment().format('YYYY-MM-DD'),
						component: {
							name: 'el-date-picker',
							attrs: {
								type: 'date',
								'value-format': 'yyyy-MM-dd'
							}
						},
						rules: [
							{
								required: true,
								message: '请选择活动时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'endTime',
						props: {
							'label-width': '0px'
						},
						span: 12,
						component: {
							name: 'el-select',
							props: {
								placeholder: '请选择结束时间'
							},
							options: timeList2
						},
						rules: [
							{
								required: true,
								message: '请选择结束时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'ysqLevel',
						label: '商品排序：',
						value: 100,
						component: {
							name: 'ysqlevels',
							data() {
								return {
									ysqLevel: 100
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.ysqLevel = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.ysqLevel}
											controls-position="right"
											onInput={this.input}
											min={1}
											max={10000}></el-input-number>
										<span style="color:#999999;margin-left:10px">
											序号越大，排序越靠前
										</span>
									</div>
								);
							}
						}
					},
					{
						prop: 'defNum',
						label: '预设抢购：',
						value: 0,
						component: {
							name: 'defNum-s',
							data() {
								return {
									value2: 0
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.value2}
											controls-position="right"
											onInput={this.input}
											min={0}
											max={self.defNumMax}></el-input-number>
									</div>
								);
							}
						}
					},
					{
						label: '状态',
						prop: 'status',
						value: 1,
						component: {
							name: 'el-select',
							options: [
								{
									label: '上架',
									value: 1
								},
								{
									label: '下架',
									value: 2
								}
							]
						}
					},
					{
						prop: 'appSort',
						label: '显示平台',
						value: appArr,
						component: {
							name: 'slelect-app2',
							data() {
								return {
									list: [],
									checked: false
								};
							},
							props: {
								value: null
							},
							watch: {
								value: {
									immediate: true,
									handler(val) {
										this.list = val;
									}
								}
							},
							methods: {
								change(e) {
									this.$emit('input', e);
								},
								changeAll(type) {
									let all = [];
									self.fromList.map(i => {
										all.push(i.value);
									});
									if (type) {
										this.list = all;
									} else {
										this.list = [];
									}
									this.$emit('input', this.list);
								}
							},
							render() {
								return (
									<div>
										<el-select
											clearable
											multiple
											style="width:100%"
											onChange={this.change}
											v-model={this.list}
											placeholder="请选择">
											{self.fromList.map(e => {
												return (
													<el-option
														key={e.key}
														label={e.label}
														value={e.value}></el-option>
												);
											})}
										</el-select>
										<el-checkbox
											v-model={this.checked}
											onChange={this.changeAll}>
											全选平台
										</el-checkbox>
									</div>
								);
							}
						}
					}
				],
				op: {
					visible: true,
					layout: ['confirm']
				},
				on: {
					submit({ data, close, done }) {
						let aList = [];
						let d = _.cloneDeep(data.appSort);
						d.map(i => {
							aList.push({
								title: '',
								pick: '',
								level: '0',
								label: '',
								app: i
							});
						});
						data.tljMoney = data.mdMoney;
						data.accountIds = data.accountIds.join(',');
						data.quanMLink = self.enterGoodsInfo.quanMLink;
						data.hzQuanOver = self.enterGoodsInfo.hzQuanOver;
						data.startTime = data.time + ' ' + data.startTime;
						data.endTime = data.time2 + ' ' + data.endTime;
						delete data.time;
						delete data.time2;
						delete data.mdMoney;
						let _sum = (
							0.01 *
							parseFloat(self.enterGoodsInfo.endPrice) *
							parseFloat(data.url.commissionRate)
						).toFixed(2);
						if (Number(data.tljMoney) >= Number(_sum)) {
							self.$confirm('淘礼金金额大于佣金，是否继续创建商品?', '提示', {
								type: 'warning',
								confirmButtonText: '确认',
								cancelButtonText: '取消'
							})
								.then(() => {
									self.$service.goodsMenagement.mdGoods
										.add({
											...data,
											...data.url,
											appSort: aList,
											gid: item.gid,
											type: 1,
											tljType: 1
										})
										.then(() => {
											self.$message({
												message: '设置成功',
												type: 'success'
											});
											self.crud.refresh();
											close();
											return;
										})
										.catch(err => {
											self.$message.error(err);
										});
								})
								.catch(() => {
									done();
								});
						} else {
							self.$service.goodsMenagement.mdGoods
								.add({
									...data,
									...data.url,
									appSort: aList,
									gid: item.gid,
									type: 1,
									tljType: 1
								})
								.then(() => {
									self.$message({
										message: '设置成功',
										type: 'success'
									});
									self.crud.refresh();
									close();
									return;
								})
								.catch(err => {
									self.$message.error(err);
								});
						}
					}
				}
			});
		},
		// 设置互动营销
		setStep(item) {
			let self = this;
			const app = this.$refs['cl-form'].open({
				props: {
					labelWidth: '120px',
					center: true,
					width: '500px',
					'custom-class': 'custom-class-dialog'
				},
				items: [
					{
						prop: 'name',
						label: '气泡名称：',
						span: 24,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						},
						rules: {
							required: true,
							message: '请输入气泡名称',
							trigger: 'blur'
						}
					},
					{
						prop: 'type',
						label: '类型：',
						value: 1,
						component: {
							name: 'el-select',
							props: {
								placeholder: '请选择活动类型',
								clearable: true,
								disabled: true
							},
							options: [
								{
									label: '商品链接',
									value: 1
								},
								{
									label: '小程序链接',
									value: 2
								}
							]
						},
						rules: [
							{
								required: true,
								message: '请选择活动类型',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'stepNum',
						label: '步数值：',
						span: 24,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						},
						rules: {
							required: true,
							message: '请输入步数值',
							trigger: 'blur'
						}
					},
					{
						prop: 'level',
						label: '排序：',
						span: 24,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						},
						rules: {
							required: true,
							message: '请输入排序',
							trigger: 'blur'
						}
					},
					{
						prop: 'timing',
						label: '浏览定时：',
						span: 12,
						value: 10,
						component: {
							name: 'el-select',
							props: {
								clearable: true
							},
							options: [
								{
									label: '0秒',
									value: 0
								},
								{
									label: '5秒',
									value: 5
								},
								{
									label: '10秒',
									value: 10
								},
								{
									label: '15秒',
									value: 15
								},
								{
									label: '20秒',
									value: 20
								}
							]
						},
						rules: {
							required: true,
							message: '请选择浏览定时',
							trigger: 'blur'
						}
					},
					{
						prop: 'time',
						label: '显示时间：',
						span: 24,
						value: [
							moment(item.couponStarttime * 1000).format('YYYY-MM-DD'),
							moment(item.couponEndtime * 1000).format('YYYY-MM-DD')
						],
						// value: moment().format('YYYY-MM-DD'),
						component: {
							name: 'el-date-picker',
							attrs: {
								type: 'daterange',
								'value-format': 'yyyy-MM-dd',
								'start-placeholder': '开始日期',
								'end-placeholder': '结束日期'
							}
						},
						rules: [
							{
								required: true,
								message: '请选择活动时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'status',
						label: '状态：',
						value: 1,
						component: {
							name: 'el-radio-group',
							options: [
								{
									label: '显示',
									value: 1
								},
								{
									label: '隐藏',
									value: 2
								}
							]
						},
						rules: [
							{
								required: true,
								message: '请选择活动时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'remark',
						label: '备注：',
						span: 24,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						}
					}
				],
				op: {
					visible: true,
					layout: ['confirm']
				},
				on: {
					load() {
						// alert('222')
					},
					submit({ data, close }) {
						self.$service.interactiveSoft.bubbleSetting
							.add({
								...data,
								jumpUrl: item.gid,
								startTime: moment(data.time[0]).format('YYYY-MM-DD 00:00:00'),
								endTime: moment(data.time[1]).format('YYYY-MM-DD 23:59:59')
							})
							.then(() => {
								close();
							});
					}
				}
			});
		},
		// 设置零元购
		setZero(item) {
			let self = this;
			const app = this.$refs['cl-form'].open({
				props: {
					labelWidth: '120px',
					center: true,
					'custom-class': 'custom-class-dialog'
				},
				items: [
					{
						prop: 'title',
						label: '商品标题',
						span: 24,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						}
					},
					{
						prop: 'accountIds',
						label: '账号',
						value: [],
						hidden: self.appName != 'tjt',
						component: {
							name: 'el-select',
							props: {
								placeholder: '请选择账号',
								multiple: true
							},
							options: self.accountList
						},
						rules: {
							required: true,
							message: '账号不能为空'
						}
					},
					{
						prop: 'appPlatforms',
						label: '平台',
						span: 13,
						value: [self.fromList[0].value],
						component: {
							name: 'el-select',
							options: self.fromList,
							attrs: {
								placeholder: '请选择平台',
								multiple: true
							},
							on: {
								change: id => {}
							}
						},
						rules: {
							required: true,
							message: '账号不能为空'
						}
					},
					{
						prop: 'gid',
						label: '商品ID',
						span: 10,
						value: item.gid,
						component: {
							name: 'el-input',
							attrs: {
								placeholder: '请选择'
							},
							props: {}
						}
					},
					{
						prop: 'url',
						props: {
							labelWidth: '0px'
						},
						component: {
							name: 'search-counpon',
							props: {
								item: Object
							},
							attrs: {
								item
							},
							mounted() {
								this.$refs['real'].ruleForm.url = this.item.link;
								this.$refs['real'].ruleForm.couponUrl = this.item.couponUrl;
								this.$refs['real'].ruleForm.gid = this.item.gid;
								this.$refs['real'].submitForm('form');
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								},
								Goodsinfo(e) {
									self.enterGoodsInfo = e;
									if (e.preCommssion) {
										app.setForm('mdMoney', e.preCommssion);
									}
								},
								perface(e) {
									self.perfaceValue_Zero = e;
								},
								onSelectPic(url) {
									app.setForm('pic', url);
								}
							},
							render() {
								return (
									<searchCounpon
										ref="real"
										onInput={this.input}
										onGoodsInfo={this.Goodsinfo}
										onperface={this.perface}
										on-select-pic={this.onSelectPic}
										item={self.enterGoodsInfo}></searchCounpon>
								);
							}
						},
						rules: [{ required: true, message: '请先检索商品', trigger: 'blur' }]
					},
					{
						prop: 'mdMoney',
						label: '淘礼金金额：',
						component: {
							name: 'mdMoney_c',
							data() {
								return {
									value2: 0
								};
							},
							props: {
								value: null
							},
							watch: {
								value: {
									immediate: true,
									handler(val) {
										if (val) {
											this.value2 = val;
										}
									}
								}
							},
							methods: {
								Change(e) {
									this.$emit('input', e);
									if (self.appName != 'tjt') {
										if (
											e >=
											(self.enterGoodsInfo.endPrice -
												self.enterGoodsInfo.hzQuanOver) *
												0.8
										) {
											self.$message.error(
												'淘礼金金额不能大于商品券后价的80%'
											);
										}
									}
								}
							},

							render() {
								return (
									<div style="display:flex">
										<el-input-number
											max={
												Number(
													self.enterGoodsInfo.endPrice -
														self.enterGoodsInfo.hzQuanOver
												) || 0
											}
											step={0.01}
											min={0}
											v-model={this.value2}
											onChange={this.Change}></el-input-number>
										<div style="margin-left:10px">
											到手价格￥
											<span style="color:red">
												{(
													parseFloat(self.enterGoodsInfo.endPrice || 0) -
													(this.value2 || 0) -
													(self.enterGoodsInfo.hzQuanOver || 0)
												).toFixed(2)}
											</span>
											元
										</div>
									</div>
								);
							}
						},
						rules: {
							required: true,
							trigger: ['blur', 'change'],
							validator: (rule, value, callback) => {
								if (value >= 1) {
									callback();
								} else {
									callback(new Error('补贴金额必须大于1'));
								}
							}
						}
					},
					{
						prop: 'total',
						label: '活动商品个数：',
						span: 8,
						value: parseInt(Math.random() * (10000 - 5000 + 1) + 5000, 10),
						component: {
							name: 'el-input-number',
							attrs: {
								'controls-position': 'right',
								min: 1,
								max: 10000
							}
						},
						rules: [
							{
								required: true,
								message: '请输入活动商品数量',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'time',
						label: '活动时间：',
						value: self.actime,
						span: 16,
						component: {
							name: 'el-date-picker',
							attrs: {
								type: 'datetimerange',
								'value-format': 'yyyy-MM-dd HH:mm:ss'
							}
						},
						rules: [
							{
								required: true,
								message: '请选择活动时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'ysqLevel',
						label: '商品排序：',
						value: 100,
						component: {
							name: 'ysqlevels',
							data() {
								return {
									ysqLevel: 100
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.ysqLevel = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.ysqLevel}
											controls-position="right"
											onInput={this.input}
											min={1}
											max={10000}></el-input-number>
										<span style="color:#999999;margin-left:10px">
											序号越大，排序越靠前
										</span>
									</div>
								);
							}
						}
					},
					{
						prop: 'status',
						label: '商品状态：',
						value: 1,
						component: {
							name: 'g_radio',
							data() {
								return {
									value2: 1
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = Number(this.value || 1);
							},
							methods: {
								change(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<el-radio-group onChange={this.change} v-model={this.value2}>
										<el-radio label={1}>上架</el-radio>
										<el-radio label={2}>下架</el-radio>
									</el-radio-group>
								);
							}
						}
					}
				],
				op: {
					visible: true,
					layout: ['confirm']
				},
				on: {
					submit({ data, close, done }) {
						data.appPlatforms = data.appPlatforms.join(',');
						data.quanMLink = self.enterGoodsInfo.quanMLink;
						data.hzQuanOver = self.enterGoodsInfo.hzQuanOver;
						let t = 0;
						if (self.appName == 'tjt') {
							t = 2;
							data.tljType = 1;
							data.accountIds = data.accountIds.join(',');
							data.tljMoney = data.mdMoney;
							delete data.mdMoney;
						}
						let _sum = (
							0.01 *
							parseFloat(self.enterGoodsInfo.endPrice) *
							parseFloat(data.url.commissionRate)
						).toFixed(2);
						if (Number(data.tljMoney) >= Number(_sum)) {
							self.$confirm('淘礼金金额大于佣金，是否继续创建商品?', '提示', {
								type: 'warning',
								confirmButtonText: '确认',
								cancelButtonText: '取消'
							})
								.then(() => {
									self.$service.goodsMenagement.mdGoods
										.add({
											...data,
											...data.url,
											gid: item.gid,
											startTime: data.time[0],
											endTime: data.time[1],
											isFree: 1,
											type: t
										})
										.then(() => {
											self.$message({
												message: '设置成功',
												type: 'success'
											});
											self.crud.refresh();
											close();
											return;
										})
										.catch(err => {
											self.$message.error(err);
										});
								})
								.catch(() => {
									done();
								});
						} else {
							self.$service.goodsMenagement.mdGoods
								.add({
									...data,
									...data.url,
									gid: item.gid,
									startTime: data.time[0],
									endTime: data.time[1],
									isFree: 1,
									type: t
								})
								.then(() => {
									self.$message({
										message: '设置成功',
										type: 'success'
									});
									self.crud.refresh();
									close();
									return;
								})
								.catch(err => {
									self.$message.error(err);
								});
						}
					}
				}
			});
		},
		onLoad({ ctx, app }) {
			const self = this;
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.goods)
				.set('dict', {
					label: {
						add: '录入商品'
					},
					api: {
						info: 'detail'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '商品信息',
							prop: 'goodInfo',
							align: 'left',
							'min-width': 400
						},
						{
							label: '优惠券信息',
							prop: 'couponInfo',
							align: 'left',
							'min-width': 350
						},
						{
							label: '置顶排序',
							prop: 'recommendSort',
							align: 'center'
						},
						{
							label: '是否首页置顶',
							prop: 'isRecommended',
							align: 'center',
							minWidth: 150
						},
						{
							label: '商品排序',
							prop: 'ysqLevel',
							align: 'center',
							sortable: 'custom',
							emptyText: '0',
							'min-width': 100
						},
						{
							label: '月销量',
							prop: 'sale',
							align: 'center',
							sortable: 'custom',
							'default-sort': 'descending',
							emptyText: '无',
							'min-width': 100,
							formatter: row => {
								return row.sale + '件';
							}
						},
						{
							label: '佣金比例',
							prop: 'commissionRate',
							align: 'center',
							sortable: 'custom',
							emptyText: '0',
							'min-width': 100,
							formatter: row => {
								return row.commissionRate + '%';
							}
						},
						{
							label: '9.9包邮',
							prop: 'isNine',
							align: 'center',
							'min-width': 100
						},
						{
							label: '抖好货',
							prop: 'isDHh',
							align: 'center',
							'min-width': 100
						},
						{
							label: '是否下架',
							prop: 'gStatus',
							align: 'center',
							'min-width': 100
						},
						{
							label: '平台',
							prop: 'platform',
							align: 'center',
							'min-width': 100
						}
					],

					op: {
						props: {
							width: 140
						},
						layout: [
							'slot-setFree',
							'slot-setSort',
							'slot-setBillion',
							'slot-setTime',
							'slot-zero',
							'slot-step'
						]
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '120px',
						center: true,
						'custom-class': 'custom-class-dialog'
					},
					items: [
						{
							prop: 'pic',
							label: '商品主图：',
							span: 24,
							component: {
								name: 'cl-upload'
							}
						},
						{
							prop: 'title',
							label: '商品标题',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini'
								}
							}
						},
						{
							prop: 'url',
							props: {
								labelWidth: '0px'
							},
							// label: '优惠券链接：',
							component: {
								name: 'search-counpon',
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<searchCounpon
											onInput={this.input}
											item={self.enterGoodsInfo}></searchCounpon>
									);
								}
							},
							rules: [{ required: true, message: '请先检索商品', trigger: 'blur' }]
						},
						{
							prop: 'isNine',
							label: '是否9.9包邮：',
							value: false,
							component: {
								name: 'el-switch'
							}
						},
						{
							prop: 'isFree',
							label: '是否0元购：',
							value: false,
							component: {
								name: 'el-switch'
							}
						},

						{
							prop: 'ysqLevel',
							label: '商品排序：',
							value: 100,
							hidden: self.appName != 'tjt',
							component: {
								name: 'ysqlevels',
								data() {
									return {
										ysqLevel: 100
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.ysqLevel = this.value;
								},
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div style="display:flex">
											<el-input-number
												v-model={this.ysqLevel}
												controls-position="right"
												onInput={this.input}
												min={1}
												max={10000}></el-input-number>
											<span style="color:#999999;margin-left:10px">
												序号越大，排序越靠前
											</span>
										</div>
									);
								}
							}
						},
						{
							prop: 'gStatus',
							label: '商品状态',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '上架',
										value: 1
									},
									{
										label: '下架',
										value: 0
									}
								]
							}
						},
						{
							prop: 'isRecommended',
							props: {
								'label-width': '120px'
							},
							label: '是否开启首页置顶',
							span: 13,
							value: false,
							component: {
								name: 'el-switch',
								on: {
									change(val) {
										if (val) {
											app.setData(
												'upsert.items[prop:recommendSort].hidden',
												false
											);
										} else {
											app.setData(
												'upsert.items[prop:recommendSort].hidden',
												true
											);
										}
									}
								}
							}
						},
						{
							prop: 'recommendSort',
							label: '商品置顶排序',
							span: 24,
							hidden: true,
							value: 1,
							component: {
								name: 'recommendSort-input',
								data() {
									return {
										value2: 0
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.value2 = this.value;
								},
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div style="display:flex">
											<el-input-number
												controls-position="right"
												min={1}
												max={5}
												onInput={this.input}
												v-model={this.value2}></el-input-number>
											<span style="color:red;margin-left:10px">
												* 首页置顶(序号越小，排序越靠前)
											</span>
										</div>
									);
								}
							},
							rules: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
						}
					],
					op: {
						visible: true,
						layout: ['confirm']
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-add', 'query', 'flex1', 'search-key'],
					['slot-filter'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', () => {
					app.hiddenItem('recommendSort', true);
				})
				.on('close', isOpen => {
					if (!isOpen) {
						// 清空商品数据
						this.enterGoodsInfo = {};
					}
				})
				.on('submit', (isOpen, data, { next }) => {
					next({
						...data,
						...data.url,
						isFree: data.isFree ? 1 : 0,
						isRecommended: data.isRecommended ? 1 : 0,
						isNine: data.isNine ? 1 : 0,
						gid: this.enterGoodsInfo.gid
					});
				})
				.on('refresh', async (params, { next, render }) => {
					if (params.isNine === '') {
						delete params.isNine;
					}
					if (params.isDhh === '') {
						delete params.isDhh;
					}
					this.appName = store.get('platForm') || '';

					next(params);
				})
				.done();

			app.refresh({
				gStatus: 1,
				startCouponMoney: 0,
				startSale: 0

				// order: 'asc',
				// prop: 'endPrice'
			});
		},
		// 录入商品
		addGoods() {
			this.crud.add();
		},
		search() {},
		refresh(data) {
			this.crud.refresh({
				...data
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.nav {
	padding: 10px 0;
	font-size: $font12;
	::v-deep .el-input-number.is-controls-right .el-input__inner {
		padding-left: 15px;
		padding-right: 20px;
	}
	::v-deep .el-input-number--mini {
		width: 71px;
	}
	.nav-li {
		margin-right: 20px;
		span {
			color: $text-grey;
			margin-right: 10px;
		}
		.el-select {
			width: 90px;
		}
		.el-input-number--mini {
			width: 100px;
		}
	}
}
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
</style>
